<!--
 * @Descripttion: 新增运行记录（油色谱）
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-16 15:46:00
 * @LastEditTime: 2021-08-21 16:11:40
-->
<template>
    <div id="addOperatRecord">
        <!-- <van-nav-bar  title="新增运行记录" left-arrow @click-left="back"/> -->
        <Theader title="新增运行记录" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <!-- 油色谱基本信息 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/image091-baseMsg.png"
                        style="height:1.0625rem;width:1.0625rem;padding-right:1.0625rem;">
                    <span>基本信息</span>
                </div>
                <div class="container-text" v-for="(item,i) in logList" :key="i">
                    <van-field v-model="item.text2" :label="item.text1" placeholder="请选择>" input-align="right">
                    </van-field>
                    <!-- <van-cell-group v-for="(item,i) in logList" :key="i">
                        <van-cell :title="item.text1" :value="item.text2" />
                    </van-cell-group> -->
                </div>
            </div>
            <div class="add-box">
                <span>+</span>
            </div>
            <div class="add-text">
                <span>导入上一次设备清单</span>
            </div>
        </div>
        <div class="footer-box">
            <button class="confirm-btn">保存</button>
        </div>
    </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                logList: [{
                    text1: '记录人',
                    text2: '迟长兴'
                }, {
                    text1: '记录时间',
                    text2: '2021/05/25 11:07'
                }, {
                    text1: '记录类型',
                    text2: '',
                }, {
                    text1: '变电站/开闭所',
                    text2: '丰泉变电站'
                }, {
                    text1: '设备名称',
                    text2: '设备名称'
                }, {
                    text1: '检测部位',
                    text2: '请输入 >'
                }, {
                    text1: '检测时间',
                    text2: '请选择 >'
                }, {
                    text1: 'H2',
                    text2: '请选择 >'
                }, {
                    text1: 'C2H4',
                    text2: '请选择 >'
                }, {
                    text1: 'CH4',
                    text2: '请选择 >'
                }, {
                    text1: 'C2H6',
                    text2: '请选择 >'
                }, {
                    text1: 'C2H2',
                    text2: '请选择 >'
                }]
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: 'addRecord'
                })
            },
        },
        created() {
            this.logList[2].text2 = this.$route.params.recordMsg.text
        }
    }
</script>

<style>
    #addOperatRecord {
        width: 100%;
        height: 100vh;
        font-size: 0.9375rem;
    }

    #addOperatRecord .assets-box {
        /* height: calc(100vh - 66px); */
        /* overflow: auto; */
        padding: 10px;
        background: #F5F6F7;
    }

    #addOperatRecord .assets-container {
        /* height: calc(100vh - 6rem); */
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background-image: url(../../images/image_pm_form_bg.png);
        background-size: 100% 100%;
    }

    #addOperatRecord .container-title {
        font-size: 1.0625rem;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    #addOperatRecord .container-text {
        font-size: 0.8125rem;
        color: #999999
    }

    #addOperatRecord .add-box {
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 1.5rem;
        color: #0EB295;
        border: 1px solid #0EB295;
        border-radius: 5px;
        margin: 10px 0;
    }

    #addOperatRecord .add-text {
        text-decoration: underline;
        text-decoration-color: #0EB295;
        color: #0EB295;
        text-align: right;
    }

    #addOperatRecord .footer-box {
        height: 3rem;
        background: #fff;
        padding: 0.5rem;
    }

    #addOperatRecord .footer-box .confirm-btn {
        height: 100%;
        width: 100%;
        background: #0EB295;
        border-radius: 5px;
        border: #0EB295;
        color: #fff;
        font-size: 1.25rem;
    }

    #addOperatRecord .van-field__label {
        width: 7.2rem;
    }
</style>